<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>	</title>
	<style type="text/css">
		/*	背景图片background-image: url("图片路径");	
			-引入：如果背景图片小于容器大小，默认默认重复，铺满容器。如果背景图片超出容器大小，超出部分会隐藏

			-平铺方式：background-repeat:默认平铺
				--no-repeat不平铺
				--repeat-x 在水平方向上平铺
				--repeat-y 在垂直方向上平铺
			-图片大小：background-size：水平，垂直
				--①宽度px(和img呈现的效果类似，只设置宽度，高度会自适应等比例缩放)、高度px
				--②百分比 （可能会导致图片变形 并且都是相对于父元素计算的
				注意：如果水平垂直都设置，可能会导致图片变形，这时候我们只设置一个值，另一个会等比例缩放，写一个值默认是水平宽度，如果单独设置垂直高度，水平宽度可以写成auto(自适应)background-size:auto 100%;
				--③cover 代表会自动填满父元素容器
			-图片位置: background-position: 水平移动的距离，垂直移动的距离
			注意:只有一个参数的时候，默认是水平移动的距离，垂直方向自动居中
				--① 单位px
				--② 百分比%
				--③关键字 水平: left左 center中 right右
						 垂直: top顶部 center中 bottom底部
			-图片固定: background-attachment 
				--fixed 当加上这个属性，图片位置就变成以浏览器窗口为参考点，如果设置水平居右，而容器宽度不够大，图片就会看不见
				--scroll默认属性

			-综合属性:
			background: url(./222.jpg) green no-repeat center center fixed;
			background-size: auto 60%;

		*/
		.bg{
			width: 100%;
			height: 800px;
			/*background-image: url(./222.jpg);
			background-size: 100%;
			background-repeat:no-repeat;
			background-color: green;
			background-position: right;
			background-attachment: fixed;*/
			background: url(./222.jpg) green no-repeat right fixed;
            /*	不参与到综合写法	*/
			background-size: 50%;
			
		}
	</style>
</head>
<body>
	<div class="bg"></div>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>